Ext.define('Sh.ux.SignPanel', {
	extend : 'Ext.panel.Panel',
	requires:['Sh.ux.ColorField'],
	config: {
		drawArray: [],
		activeBt: false,
		surface: undefined,
		facesize: undefined,
		vdata: undefined,
		player: undefined,
		yanSe:"#FF0000",  //颜色
		typeface:"3",	  //线条粗细
		isTextEditor:"0"
	},
	initComponent : function(config) {
		var me = this;
		me.title = '操作异常标记';
		
		me.on('destroy',function(){//销毁文本框
			$('#text-editor').hide();
		});
		
		me.on('boxready',function(win,width,height){
			var body = Ext.get(win.body);
			me.setFacesize({w: body.getWidth(),h: body.getHeight()});
			me.add({
				xtype: 'draw',
				viewBox: false,
				items: []
			});
			me.setSurface(me.items.items[0].surface);
			me.addDraw({
				type: 'image',
				x: 0,
				y: 0,
				width: me.facesize.w,
				height: me.facesize.h,
				src: 'videomanager/getVideoPic.do?videoid='+me.vdata.id+'&time='+me.player.getCurrentTime()
			});
			
			var draw = me.getSurface();
			draw.el.on('mousedown',function(e){
				me.downps = me.getMousePs(e);
				me.drawing = true;
			});
			draw.el.on('mouseup',function(e){
				me.upps = me.getMousePs(e);
				var activeb = me.getActiveBt();
				if(activeb && activeb.drawtype && me.drawing){
					var w=me.upps[0] - me.downps[0];
					var h=me.upps[1] - me.downps[1];
					w=w.toString();
					h=h.toString();
					var xci=me.downps[0];  //x坐标值
					var yci=me.downps[1];  //y坐标值
					if(w.indexOf('-') !=-1){//如何宽度中有负数，就将转为整数
						w=w.replace('-','');
						xci=xci-w;
					}
					if(h.indexOf('-') !=-1){//如何宽度中有负数，就将转为整数
						h=h.replace('-','');
						yci=yci-h;
					}
					switch (activeb.drawtype) {
					case 'rect':
						me.addDraw({type: 'rect',
						    width: w,
						    height: h,
						    opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface(),
						    x: xci,
						    y: yci
				    	});
						break;
					case 'circle':
						me.addDraw({
						    type: "ellipse",
					        radiusX: w,
					        radiusY: h,
					        x: (me.upps[0]+me.downps[0])/2,
					        y: (me.upps[1]+me.downps[1])/2,
					        opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface()
				    	});
						break;
					case 'text':
						me.showTextEditor(e);
						break;
					case 'line':
						me.addDraw({type: 'rect',
						    width: w,
						    height: 1,
						    opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface(),
					        x: xci,
						    y: me.downps[1]
				    	});
						break;
					default:
						break;
					}
				}
				me.drawing = false;
			});
			
			draw.el.on('mousemove',function(e){
				me.upps = me.getMousePs(e);
				Ext.getCmp('current-m-ps').setValue(parseInt(me.upps[0])+','+parseInt(me.upps[1]));
				var activeb = me.getActiveBt();
				if(activeb && activeb.drawtype && me.drawing){
					var w=me.upps[0] - me.downps[0];
					var h=me.upps[1] - me.downps[1];
					w=w.toString();
					h=h.toString();
					var xci=me.downps[0];  //x坐标值
					var yci=me.downps[1];  //y坐标值
					if(w.indexOf('-') !=-1){//如何宽度中有负数，就将转为整数
						w=w.replace('-','');
						xci=xci-w;
					}
					if(h.indexOf('-') !=-1){//如何宽度中有负数，就将转为整数
						h=h.replace('-','');
						yci=yci-h;
					}
					switch (activeb.drawtype) {
					case 'rect':
						me.drawTemp({type: 'rect',
						    width: w,
						    height: h,
						    opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface(),
						    x: xci,
						    y: yci,
						    group: 'rectangles'
				    	});
						break;
					case 'circle':
						me.drawTemp({
						    type: "ellipse",
					        radiusX: w,
					        radiusY: h,
					        x: (me.upps[0]+me.downps[0])/2,
					        y: (me.upps[1]+me.downps[1])/2,
					        opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface()
				    	});
						break;
					case 'line':
						me.drawTemp({type: 'rect',
						    width: w,
						    height:1,
						    opacity: 0.8,
					        stroke: me.getYanSe(),
					        'stroke-width': me.getTypeface(),
					        x: xci,
						    y: me.downps[1],
						    group: 'rectangles'
				    	});
						break;
					default:
						break;
					}
				}
			});
		});
		
		
		me.tbar = Ext.create('Ext.toolbar.Toolbar',{
			items: [{
				iconCls:'icon-b_jx',
				drawtype: 'rect',
				handler: function(b){
					b.ownerCt.select(b);
				},
				listeners: {
					boxready: function(b){
						b.ownerCt.select(b);
					}
				}
			},{
				iconCls:'icon-b_y',
				drawtype: 'circle',
				handler: function(b){
					b.ownerCt.select(b);			
				}
			},{
				text: '',
				iconCls:'icon-b_bj',
				drawtype: 'text',
				handler: function(b){
					b.ownerCt.select(b);
				}
			},{
				text: '',
				iconCls:'icon-b_zx',
				drawtype: 'line',
				handler: function(b){
					b.ownerCt.select(b);
				}
			},{
				iconCls:'icon-b_ch',
				xtype: 'button',
				text: '',
				handler: function(b){
					b.ownerCt.select(b);
					me.deleteDraw();
				}
			},{
				xtype: 'colorfield',//颜色选择
				id:"colorfieldId",
				iconCls:'icon-b_ys',
				width:100,
				value: 'FF0000',
				listeners:{
					change:function(field,newValue,oldValue,eOpts){
						me.setYanSe(newValue);
					},
					afterrender:function(cmp, eOpts) {
						Ext.getCmp("colorfieldId").setFieldStyle('background:red;color:#FF0000');
					}
                }
			},{
				xtype: 'combobox',
				fieldLabel: '线条粗细',
				labelWidth: 60,
				width:120,
				queryMode: 'local',
			    displayField: 'name',
			    valueField: 'v',
				store: {
					xtype: 'store',
					fields: ['v', 'name'],
				    data : [
				        {v: 1,name: '1'},
				        {v: 2,name: '2'},
				        {v: 3,name: '3'},
				        {v: 4,name: '4'},
				        {v: 5,name: '5'},
				        {v: 6,name: '6'},
				        {v: 7,name: '7'},
				        {v: 8,name: '8'}
				    ]
				},
				value:3,
				listeners:{
					change:function(field,newValue,oldValue,eOpts){
						me.setTypeface(newValue);
					}
                }
			},'->',{
				xtype: 'displayfield',
				id: 'current-m-ps',
				fieldLabel: '当前坐标',
				labelWidth: 65,
				width: 165
			}],
			select: function(b){
				if(b.drawtype){
					var items = b.ownerCt.items.items;
					Ext.Array.each(items,function(item){
						$(item.el.dom).css('background-color','');
					});
					$(b.el.dom).css('background-color','#BABABA');
					me.setActiveBt(b); 
				}
			}
		});
		
		me.callParent();
	},
	getMousePs: function(e){
		var offset=$(this.el.dom).offset();//得到边框距离
		return [e.getX()-offset.left-2,e.getY()-offset.top-50];
	},
	renderDraw: function(){
		var me = this;
		var items = me.getSurface().items.items;
		for ( var i = items.length-1; i >=0 ; i--) {
			if(items[i].istemp)me.getSurface().remove(items[i]);
		}
		
		me.getSurface().render();
	},
	drawTemp: function(draw){
		var me = this;
		draw.istemp = true;
		me.renderDraw();
		me.getSurface().add(draw);
		me.getSurface().render();
	},
	addDraw: function(draw){
		var me = this;
		me.getSurface().add(draw);
		me.renderDraw();
	},
	removeDraw: function(draw){
		var me = this;
		me.getSurface().remove(draw);
		me.renderDraw();
	},
	deleteDraw: function(){
		var me = this;
		me.renderDraw();
		var items = me.getSurface().items.items;
		if(items.length > 1){
			me.getSurface().remove(items[items.length-1]);
		}
		
		me.getSurface().render();
	},
	showTextEditor : function(e){
		var me = this;
		var editor=$('#text-editor');
		if(!editor[0] ){
			editor=$('<input type id="text-editor">').width(120).css('position','fixed').css('border','blue 1px dashed').css('opacity','1.00')
			.css('background-color','transparent').css('z-index',100000).hide();
			 $(me.body.dom).append(editor);
			 editor.blur(function(){
				 var text = $('#text-editor').val()/*.trim()*/;
				 if(text != ''){
					 var fontsize = editor.css('font-size')+' 宋体';
					 editor.data('signpanel').addDraw({
					    type: "text",
					    text: text,
				        fill: $('#text-editor').css('color'),
				        font: fontsize,
				        x: editor.data('downps')[0]+2,
					    y: editor.data('downps')[1]
			    	});
				 }
				 editor.val('').hide();
			});
			$('#text-editor').bind('input onchange', function() {  
				editor.width(me.textWidth(editor.val(),editor.css('font-size')));
			}); 
		}
		editor.data('signpanel',me);
		if(editor.is(":hidden")){
			editor.css('position','absolute').css('top',e.getY()-93).css('left',e.getX()-2).data('downps',me.downps)
			.css('font-size','24px').width(120)
			.css('color',me.getYanSe()).show().focus();
		}
	},
	textWidth: function(text,fontsize){ 
        var sensor = $('<pre>'+ text +'</pre>').css({display: 'none','font-size': fontsize}); 
        $('body').append(sensor); 
        var width = sensor.width() + 3;
        sensor.remove(); 
        width = width > 120 ? width : 120; 
        
        return width;
    },
    getImgeData : function(data){//得到图片信息
    	var me = this;
    	var items = me.getSurface().items.items;
    	var draws = [];
    	for ( var i = 1; i < items.length; i++) {
			var draw = items[i];
			draws.push({
				type: draw.type,
			    width: draw.width,
			    height: draw.height,
		        stroke: draw.stroke,
			    x: draw.x,
			    y: draw.y,
			    radiusX: draw.radiusX,
			    radiusY: draw.radiusY,
			    text: draw.text,
			    font: draw.font,
			    fill: draw.fill,
			    strokewidth: draw['stroke-width']
	    	});
		}
    	var drawdata = {
    		videoid: me.vdata.id,
    		time: me.player.getCurrentTime(),
    		width: me.facesize.w,
			height: me.facesize.h,
    		draw: draws
    	};
    	
    	
    	return Ext.encode(drawdata);
    }
});